import React from 'react';
import { Button, Table, Modal, message, Spin } from 'antd';
import { connect } from 'react-redux';
import Api from 'Utils/api';
import AddModal from './AddModal';
import CommonBorder from './../../../DispatchPage/Components/CommonBorder';
import './index.scss';

const confirm = Modal.confirm;
class SortPage extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      selectTab: 1,
      data: [],
      isLoading: true,
    };
    this.onDelete = :: this.onDelete;
    this.onAdd = ::this.onAdd;
    this.initList = ::this.initList;
  }
  componentDidMount() {
    this.initList();
  }
  initList() {
    const api = new Api({
      method: 'GET',
      path: '/directorys',
      success: (json) => {
        this.setState({ data: json, isLoading: false });
      },
      error: (msg) => {
        this.setState({
          isLoading: false
        });
        message.error(msg);
      }
    });
    api.run();
  }
  onDelete(id) {
    const self = this;
    confirm({
      title: '删除类别',
      content: '确定删除该条类别吗？',
      onOk() {
        self.setState({
          isLoading: true
        });
        const api = new Api({
          method: 'DELETE',
          path: `/directorys/${id}`,
          success: () => {
            self.initList();
          },
          error: (msg) => {
            self.setState({
              isLoading: false
            });
            message.error(msg);
          },
        });
        api.run();
      },
      onCancel() {
        console.log('Cancel');
      },
    });
  }
  onAdd(record) {
    this.form.showModal(record);
  }
  onEditOk(record) {
    //如果有对应的ID就修改一下，否则，添加一条新的
    let find = false;
    const list = [...this.state.data];
    for (let i = 0; i < list.length; i++) {
      if (list[i].id === record.id) {
        list[i] = { ...list[i], ...record };
        find = true;
        break;
      }
    }
    if (!find) {
      list.unshift(record);
    }
    this.setState({ data: list }, () => {
      this.initList();
    });
    // this.initList();
  }
  generatorColumns() {
    return [
      {
        title: '序号',
        dataIndex: 'id',
        render: text => (
          <span>{text}</span>
        )
      },
      {
        title: '类别',
        dataIndex: 'name',
        render: text => (
          <span >{text}</span >
        )
      },
      {
        title: '操作',
        dataIndex: 'power',
        render: (text, record) => (
          <span className="operate">
            <span className="edit" onClick={this.onAdd.bind(this, record)} >编辑</span >
            <span className="delete" onClick={this.onDelete.bind(this, record.id)}>删除</span >
          </span>
        )
      }
    ];
  }
  render() {
    const columns = this.generatorColumns();
    return (
      <div>
        <CommonBorder
          btn={
            <Button className="search-btn" onClick={this.onAdd}>
              <img src="images/page/icon_add.png" alt="" />
              新增
            </Button>
          }
          content={
            <Spin size="large" spinning={this.state.isLoading} tip="加载中...">
              <Table
                rowKey={record => record.id}
                columns={columns}
                bordered
                dataSource={this.state.data}
                pagination={false}
              />
            </Spin>
          }
        />
        <AddModal
          ref={(ref) => { this.form = ref; }}
          onOk={this.onEditOk.bind(this)}
        />
      </div>
    );
  }
}

function mapStateToProps(state) {
  return {
    ...state.routing,
  };
}

export default connect(mapStateToProps)(SortPage);
